<template>
      <div>
    <van-swipe :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image.img" />
      </van-swipe-item>
    </van-swipe>

    <van-grid :border="false" :column-num="3">
      <van-grid-item to="/newslist">
        <img src="../assets/images/menu1.png" alt="">
        <p>新闻资讯</p>
      </van-grid-item>
      <van-grid-item to="/photolist">
        <img src="../assets/images/menu2.png" alt="">
        <p>图片分享</p>
      </van-grid-item>
      <van-grid-item to="/goodslist">
        <img src="../assets/images/menu3.png" alt="">
        <p>商品购买</p>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/images/menu4.png" alt="">
        <p>留言反馈</p>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/images/menu5.png" alt="">
        <p>视频专区</p>
      </van-grid-item>
      <van-grid-item>
        <img src="../assets/images/menu6.png" alt="">
        <p>联系我们</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
export default {
  created() {
    this.getSwiper();
  },
  data() {
    return {
      images: [
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg"
      ]
    };
  },
  methods: {
    async getSwiper() {
      const { data: res } = await this.$http.get("/api/getlunbo");
      console.log(res);
      if (res.status != 0) return this.$toast.error("请求数据失败");
      this.images = res.message;
    }
  }
};
</script>
<style scoped lang="less">
 .van-swipe {
  height: 200px;
  background: #eee;
  img {
    width: 100%;
    height: 100%;
  }
}
.van-grid-item{
    width: 33.33333%;
    img{
        width:60px;
    }
}   
</style>